<template>
    <div class="page info">
        <nav-bar title="信息补全" @click-left="back"></nav-bar>
        <div v-if="!finish">
            <id-card showType="2" ref="idCardRef"></id-card>
            <div class="box_con1">
                <van-button type="info" size="large" @click="nextStep">完成</van-button>
            </div>
        </div>
        <div v-else>
            <CollectionRet @commit="$router.replace('/tabs')"></CollectionRet>
        </div>
        <PopCollection ref="popTips"></PopCollection>
    </div>
</template>

<script>
import { Dialog } from "vant";
import IdCard from "@/components/form/id-card.vue";
import PopCollection from "@/components/pop/pop-collection.vue";
import CollectionRet from "@/components/view/collection-ret"

export default {
    components: { IdCard, PopCollection, CollectionRet },

    data() {
        return {
            nowStep: 0,
            finish: false
        };
    },

    mounted() {
        this.nowStep = 0;
        this.$refs.popTips.show('only-idcard');
    },

    methods: {
        back() {
            Dialog.confirm({
                title: "提示",
                message: "内容还未保存，确定关闭吗？",
                confirmButtonText: "退出",
                cancelButtonText: "继续填写",
            }).then(() => {
                this.$router.replace("/tabs");
            })
        },

        nextStep() {
            const parmas = this.$refs.idCardRef.submitForm();
            this.$http.serverCollectionIdCard(parmas).then((respData) => {
                if (respData === false) {
                    return false;
                }
                return this.$http.serverCollectionSubmit();
            }).then(respData => {
                if (respData === false) {
                    return false;
                }
                this.finish = true;
            });
        },
    },

    computed: {},
};
</script>

<style lang="scss" scoped>
.info {
    width: 100%;

    .progress {
        padding: 0 40px;
        background-color: #fff;
    }

    .box_con1 {
        padding: 20px 10px;
    }
}
</style>
